<template>
	<view class="modern-container">
		<view class="header">
			<text class="title">新建辅导预约</text>
			<text class="subtitle">请填写完整的预约信息</text>
		</view>

		<!-- 老师选择 -->
		<view class="form-section">
			<view class="section-title">
				<uni-icons type="person" size="18" color="#5a7dff"></uni-icons>
				<text>选择老师</text>
			</view>
			<scroll-view class="teacher-scroll" scroll-x="true" shows-horizontal-scroll-indicator="false">
				<view class="teacher-list">
					<view class="teacher-item" v-for="(teacher, index) in teachers" :key="index"
						:class="{active: selectedTeacherId === teacher.teacherId}" @click="selectTeacher(teacher)">
						<image class="avatar" :src="teacher.avatarUrl || '/static/default-teacher.png'"></image>
						<text class="name">{{ teacher.name }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="selected-teacher-info" v-if="selectedTeacher">
				<image class="avatar" :src="selectedTeacherAvatar"></image>
				<view class="info">
					<text class="name">{{ selectedTeacher }}</text>
					<text class="phone">{{ selectedTeacherPhone }}</text>
				</view>
				<view class="close-icon" @click="clearTeacherSelection">
					<uni-icons type="close" size="20" color="#ff4d4f"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 学生搜索 -->
		<view class="form-section">
			<view class="section-title">
				<uni-icons type="contact" size="18" color="#5a7dff"></uni-icons>
				<text>选择学生</text>
			</view>
			<view class="search-box">
				<uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
				<input class="search-input" placeholder="输入学生姓名搜索" v-model="searchKeyword" @input="handleStudentSearch"
					@focus="showStudentList = true" confirm-type="search" />
			</view>

			<!-- 搜索历史 -->
			<view class="search-history" v-if="searchHistory.length > 0 && !showStudentList">
				<view class="history-title">
					<text>搜索历史</text>
					<text class="clear-history" @click="clearAllHistory">清空</text>
				</view>
				<view class="history-list">
					<view class="history-item" v-for="(item, index) in searchHistory" :key="index">
						<text @click="searchFromHistory(item)">{{ item.studentName }}</text>
						<view class="close-icon" @click.stop="removeHistory(index)">
							<uni-icons type="close" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 学生列表 -->
			<view class="student-list" v-if="showStudentList && searchResults.length > 0">
				<view class="student-item" v-for="(student, index) in searchResults" :key="index"
					@click="selectStudent(student)">
					<image class="avatar" src="/static/default-student.png"></image>
					<view class="info">
						<text class="name">{{ student.studentName }}</text>
						<text class="meta">{{ student.grade }} · {{ student.phoneNumber }}</text>
					</view>
				</view>
			</view>

			<!-- 已选学生 -->
			<view class="selected-student" v-if="selectedStudent">
				<image class="avatar" src="/static/default-student.png"></image>
				<view class="info">
					<text class="name">{{ selectedStudent.studentName }}</text>
					<text class="meta">{{ selectedStudent.grade }} · {{ selectedStudent.phoneNumber }}</text>
				</view>
				<view class="close-icon" @click="clearStudentSelection">
					<uni-icons type="close" size="20" color="#ff4d4f"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 预约信息 -->
		<view class="form-section">
			<view class="section-title">
				<uni-icons type="calendar" size="18" color="#5a7dff"></uni-icons>
				<text>预约信息</text>
			</view>

			<view class="form-item">
				<text class="label">辅导内容</text>
				<view class="subject-selector">
					<view class="subject-item" v-for="(subject, index) in subjectOptions" :key="index"
						:class="{active: selectedSubjectIndex === index}" @click="selectSubject(index)">
						{{ subject }}
					</view>
					<view class="custom-subject">
						<input class="input" v-model="customSubject" placeholder="其他科目" @focus="selectedSubjectIndex = -1" />
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">预约时间</text>
				<view class="datetime-picker">
					<picker mode="date" fields="day" :value="appointmentDate" @change="onDateChange">
						<view class="datetime-item">
							<uni-icons type="calendar" size="16" color="#5a7dff"></uni-icons>
							<text>{{ appointmentDate || '选择日期' }}</text>
						</view>
					</picker>
					<picker mode="time" :value="appointmentTime" @change="onTimeChange">
						<view class="datetime-item">
							<uni-icons type="clock" size="16" color="#5a7dff"></uni-icons>
							<text>{{ appointmentTime || '选择时间' }}</text>
						</view>
					</picker>
				</view>
				<view class="quick-time" v-if="appointmentDate">
					<text class="quick-time-item" @click="setQuickTime('08:00')">上午8点</text>
					<text class="quick-time-item" @click="setQuickTime('09:00')">上午9点</text>
					<text class="quick-time-item" @click="setQuickTime('15:00')">下午3点</text>
				</view>
			</view>

			<view class="form-item">
				<text class="label">辅导时长</text>
				<view class="duration-selector">
					<view class="duration-item" v-for="(duration, index) in durationOptions" :key="index"
						:class="{active: selectedDuration === index}" @click="selectDuration(index)">
						{{ duration.text }}
						<text class="duration-price">¥{{ duration.price }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">辅导费用</text>
				<view class="money-input">
					<text class="symbol">¥</text>
					<input class="input" type="number" v-model="money" placeholder="0.00" readonly />
					<text class="hint">根据时长自动计算</text>
				</view>
			</view>

			<view class="form-item">
				<text class="label">预约状态</text>
				<view class="status-selector">
					<view class="status-item" v-for="(status, index) in statusOptions" :key="index"
						:class="{active: statusIndex === index}" @click="statusIndex = index">
						{{ status }}
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">老师评价</text>
				<textarea class="textarea" v-model="evaluation" placeholder="请输入老师评价"></textarea>
			</view>
		</view>

		<button class="submit-btn" @click="submit">
			<text>确认预约</text>
			<uni-icons type="paperplane" size="16" color="#fff"></uni-icons>
		</button>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				searchKeyword: '',
				selectedStudent: null,
				searchResults: [],
				showStudentList: false,
				selectedTeacher: '',
				selectedTeacherAvatar: '',
				selectedTeacherId: 0,
				selectedTeacherPhone: '',
				appointmentContent: '',
				appointmentDate: '',
				appointmentTime: '',
				money: '',
				statusIndex: 0,
				evaluation: '',
				selectedDuration: 2, // 默认选择1小时
				selectedSubjectIndex: 0, // 默认选择第一个科目
				customSubject: '',
				teachers: [],
				statusOptions: ['未辅导', '已辅导待确认', '已完成'],
				subjectOptions: ['数学', '英语', '物理', '化学', '地理', '生物'],
				durationOptions: [
					{ text: '0.5小时', price: 20 },
					{ text: '1小时', price: 40 },
					{ text: '1.5小时', price: 60 },
					{ text: '2小时', price: 80 },
					{ text: '2.5小时', price: 100 },
					{ text: '3小时', price: 120 },
					{ text: '3.5小时', price: 140 },
					{ text: '4小时', price: 160 }
				],
				searchTimer: null,
				searchHistory: [], // 新增搜索历史数组
			};
		},
		onLoad() {
			this.getTeachers();
			// 加载搜索历史
			this.loadSearchHistory();
			// 设置默认日期为今天
			const today = new Date();
			this.appointmentDate =
				`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
		},
		watch: {
			selectedDuration(newVal) {
				// 当选择时长变化时，自动更新费用
				this.money = this.durationOptions[newVal].price;
			},
			selectedSubjectIndex(newVal) {
				// 当选择科目变化时，更新辅导内容
				if (newVal >= 0) {
					this.appointmentContent = this.subjectOptions[newVal];
				}
			},
			customSubject(newVal) {
				// 当自定义科目变化时，更新辅导内容
				if (this.selectedSubjectIndex === -1 && newVal) {
					this.appointmentContent = newVal;
				}
			}
		},
		methods: {
			// 加载搜索历史
			loadSearchHistory() {
				const history = uni.getStorageSync('studentSearchHistory');
				if (history) {
					this.searchHistory = JSON.parse(history);
				}
			},

			// 保存搜索历史
			saveSearchHistory() {
				uni.setStorageSync('studentSearchHistory', JSON.stringify(this.searchHistory));
			},

			// 从历史记录搜索
			searchFromHistory(item) {
				this.searchKeyword = item.studentName;
				this.selectedStudent = item;
				this.showStudentList = false;
			},

			// 添加历史记录
			addToHistory(student) {
				// 检查是否已存在
				const exists = this.searchHistory.some(item => item.userId === student.userId);
				if (!exists) {
					this.searchHistory.unshift(student);
					// 限制历史记录数量
					if (this.searchHistory.length > 5) {
						this.searchHistory.pop();
					}
					this.saveSearchHistory();
				}
			},

			// 删除单个历史记录
			removeHistory(index) {
				this.searchHistory.splice(index, 1);
				this.saveSearchHistory();
			},

			// 清空所有历史记录
			clearAllHistory() {
				this.searchHistory = [];
				uni.removeStorageSync('studentSearchHistory');
			},

			// 修改selectStudent方法
			selectStudent(student) {
				this.selectedStudent = student;
				this.searchKeyword = '';
				this.searchResults = [];
				this.showStudentList = false;
				// 添加到历史记录
				this.addToHistory(student);
			},
			getTeachers() {
				let that = this;
				uni.request({
					url: globalVariable + "/getAllTeachers",
					success(res) {
						let info = res.data;
						that.teachers = info.data;

						that.teachers.forEach(teacher => {
							if (teacher.avatarUrl) {
								teacher.avatarUrl = globalVariable + '/get/' + teacher.avatarUrl;
							} else {
								teacher.avatarUrl = '/static/default-teacher.png';
							}
						});
						
						// 默认选择第一位老师
						if (that.teachers.length > 0) {
							that.selectTeacher(that.teachers[0]);
						}
					}
				})
			},
			selectTeacher(teacher) {
				this.selectedTeacher = teacher.name;
				this.selectedTeacherAvatar = teacher.avatarUrl;
				this.selectedTeacherId = teacher.teacherId;
				this.selectedTeacherPhone = teacher.phone;
			},
			clearTeacherSelection() {
				this.selectedTeacher = '';
				this.selectedTeacherAvatar = '';
				this.selectedTeacherId = 0;
				this.selectedTeacherPhone = '';
			},
			onDateChange(e) {
				this.appointmentDate = e.detail.value;
			},
			onTimeChange(e) {
				this.appointmentTime = e.detail.value;
			},
			setQuickTime(time) {
				this.appointmentTime = time;
			},
			handleStudentSearch() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}

				if (!this.searchKeyword.trim()) {
					this.searchResults = [];
					return;
				}

				this.searchTimer = setTimeout(() => {
					this.searchStudent();
				}, 300);
			},
			searchStudent() {
				let that = this;
				uni.request({
					url: globalVariable + "/getStudentsByNameAdmin?stuName=" + this.searchKeyword,
					success(res) {
						let info = res.data;
						if (info.status == 1) {
							that.searchResults = info.data;
							that.showStudentList = true;
						} else {
							uni.showToast({
								title: info.message,
								icon: 'none'
							});
						}
					},
					fail(err) {
						console.error('搜索学生失败', err);
						uni.showToast({
							title: '搜索失败，请重试',
							icon: 'none'
						});
					}
				})
			},
			clearStudentSelection() {
				this.selectedStudent = null;
				this.searchKeyword = '';
				this.searchResults = [];
				this.showStudentList = false;
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			formatAppointmentTime() {
				if (!this.appointmentDate || !this.appointmentTime) return '';
				return `${this.appointmentDate} ${this.appointmentTime} ${this.durationOptions[this.selectedDuration].text}`;
			},
			selectDuration(index) {
				this.selectedDuration = index;
			},
			selectSubject(index) {
				this.selectedSubjectIndex = index;
				this.customSubject = '';
			},
			async submit() {
				if (!this.selectedStudent) {
					uni.showToast({
						title: '请选择学生',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedTeacher) {
					uni.showToast({
						title: '请选择老师',
						icon: 'none'
					});
					return;
				}

				if (!this.appointmentContent) {
					uni.showToast({
						title: '请输入辅导内容',
						icon: 'none'
					});
					return;
				}

				if (!this.appointmentDate || !this.appointmentTime) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					});
					return;
				}

				if (!this.money) {
					uni.showToast({
						title: '请输入辅导费用',
						icon: 'none'
					});
					return;
				}

				const appointmentTimeStr = this.formatAppointmentTime();

				let appointmentData = {
					studentId: this.selectedStudent.userId,
					studentName: this.selectedStudent.studentName,
					studentGrade: this.selectedStudent.grade,
					studentPhone: this.selectedStudent.phoneNumber,
					teacherId: this.selectedTeacherId,
					teacherName: this.selectedTeacher,
					teacherPhone: this.selectedTeacherPhone,
					appointmentTime: appointmentTimeStr,
					appointmentContent: this.appointmentContent,
					createOrderTime: this.formatDate(new Date()),
					money: this.money,
					isFinish: this.statusIndex,
					teacherComponent: this.evaluation
				};

				try {
					const res = await uni.request({
						url: globalVariable + "/paymentPostAppointmentAdmin",
						method: 'POST',
						data: appointmentData
					});

					const info = res.data;
					uni.showToast({
						title: info.message
					});

					if (info.status === 1) {
						// 重置表单
						this.selectedStudent = null;
						this.selectedTeacher = '';
						this.selectedTeacherAvatar = '';
						this.appointmentContent = '';
						this.appointmentDate = '';
						this.appointmentTime = '';
						this.money = '';
						this.evaluation = '';
						this.selectedDuration = 2;
						this.statusIndex = 0;
						this.selectedSubjectIndex = 0;
						this.customSubject = '';
					}
				} catch (err) {
					console.error('预约提交失败', err);
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.modern-container {
		padding: 24rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.header {
		margin-bottom: 40rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		display: block;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
	}

	.subtitle {
		font-size: 26rpx;
		color: #7f8c8d;
	}

	.form-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.form-section:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title text {
		margin-left: 12rpx;
	}

	.teacher-scroll {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}

	.teacher-list {
		display: inline-flex;
		padding: 8rpx 0;
	}

	.teacher-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		padding: 16rpx;
		border-radius: 16rpx;
		transition: all 0.2s;
		cursor: pointer;
	}

	.teacher-item.active {
		background: linear-gradient(135deg, #f0f5ff 0%, #e0e8ff 100%);
		box-shadow: 0 4rpx 12rpx rgba(90, 125, 255, 0.2);
	}

	.teacher-item .avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 12rpx;
		object-fit: cover;
		border: 4rpx solid #f0f0f0;
		transition: all 0.2s;
	}

	.teacher-item.active .avatar {
		border-color: #5a7dff;
		box-shadow: 0 4rpx 12rpx rgba(90, 125, 255, 0.3);
	}

	.teacher-item .name {
		font-size: 26rpx;
		color: #666;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 120rpx;
	}

	.teacher-item.active .name {
		color: #5a7dff;
		font-weight: 500;
	}

	.selected-teacher-info {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
		border-radius: 16rpx;
		margin-top: 16rpx;
		position: relative;
		border: 1rpx solid #e0e8ff;
	}

	.selected-teacher-info .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		object-fit: cover;
		border: 2rpx solid #e0e8ff;
	}

	.selected-teacher-info .info {
		flex: 1;
	}

	.selected-teacher-info .name {
		font-size: 28rpx;
		font-weight: 500;
		color: #2c3e50;
		display: block;
		margin-bottom: 6rpx;
	}

	.selected-teacher-info .phone {
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.selected-teacher-info .close-icon {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		padding: 8rpx;
		border-radius: 50%;
		background-color: rgba(255, 77, 79, 0.1);
	}

	.search-box {
		position: relative;
		margin-bottom: 24rpx;
	}

	.search-icon {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	.search-input {
		padding: 24rpx 24rpx 24rpx 72rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e0e0e0;
		background-color: #f8f9fa;
		font-size: 28rpx;
		color: #333;
		transition: all 0.2s;
	}

	.search-input:focus {
		border-color: #5a7dff;
		background-color: #fff;
		box-shadow: 0 0 0 3rpx rgba(90, 125, 255, 0.1);
	}

	/* 搜索历史样式 */
	.search-history {
		margin-top: 20rpx;
	}

	.history-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.clear-history {
		font-size: 24rpx;
		color: #999;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
	}

	.history-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.history-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		transition: all 0.2s;
	}

	.history-item:active {
		background-color: #f0f0f0;
	}

	.history-item text {
		font-size: 26rpx;
		color: #333;
	}

	.history-item .close-icon {
		padding: 8rpx;
		border-radius: 50%;
		background-color: rgba(153, 153, 153, 0.1);
	}

	.student-list {
		max-height: 500rpx;
		overflow-y: auto;
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		border: 2rpx solid #f0f0f0;
	}

	.student-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 2rpx solid #f5f5f5;
		transition: all 0.2s;
	}

	.student-item:active {
		background-color: #f8f9fa;
	}

	.student-item:last-child {
		border-bottom: none;
	}

	.student-item .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		object-fit: cover;
		border: 2rpx solid #f0f0f0;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 28rpx;
		font-weight: 500;
		color: #2c3e50;
		display: block;
		margin-bottom: 8rpx;
	}

	.meta {
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.selected-student {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
		border-radius: 12rpx;
		margin-top: 16rpx;
		position: relative;
		border: 1rpx solid #e0e0e0;
	}

	.selected-student .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		object-fit: cover;
		border: 2rpx solid #f0f0f0;
	}

	.selected-student .close-icon {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		padding: 8rpx;
		border-radius: 50%;
		background-color: rgba(255, 77, 79, 0.1);
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #2c3e50;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.input {
		padding: 24rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e0e0e0;
		background-color: #f8f9fa;
		font-size: 28rpx;
		color: #333;
		transition: all 0.2s;
		width: 100%;
		box-sizing: border-box;
	}

	.input:focus {
		border-color: #5a7dff;
		background-color: #fff;
		box-shadow: 0 0 0 3rpx rgba(90, 125, 255, 0.1);
	}

	.money-input {
		display: flex;
		align-items: center;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background-color: #f8f9fa;
		overflow: hidden;
		position: relative;
	}

	.money-input .symbol {
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.money-input .input {
		border: none;
		padding-left: 0;
		background: transparent;
	}

	.money-input .hint {
		position: absolute;
		right: 20rpx;
		font-size: 22rpx;
		color: #999;
	}

	.datetime-picker {
		display: flex;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.datetime-item {
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #333;
		border: 2rpx solid #e0e0e0;
		transition: all 0.2s;
	}

	.datetime-item:active {
		background-color: #f0f0f0;
	}

	.datetime-item uni-icons {
		margin-right: 8rpx;
	}

	.quick-time {
		display: flex;
		gap: 16rpx;
	}

	.quick-time-item {
		padding: 12rpx 20rpx;
		background-color: #f0f5ff;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #5a7dff;
		transition: all 0.2s;
	}

	.quick-time-item:active {
		background-color: #e0e8ff;
		transform: translateY(1rpx);
	}

	/* 科目选择器样式 */
	.subject-selector {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.subject-item {
		padding: 16rpx 24rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666;
		border: 2rpx solid #e0e0e0;
		transition: all 0.2s;
	}

	.subject-item.active {
		background: linear-gradient(135deg, #f0f5ff 0%, #e0e8ff 100%);
		border-color: #5a7dff;
		color: #5a7dff;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(90, 125, 255, 0.2);
	}

	.custom-subject {
		flex: 1;
		min-width: 200rpx;
	}

	.custom-subject .input {
		height: 72rpx;
		padding: 0 20rpx;
	}

	/* 时长选择器样式 */
	.duration-selector {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.duration-item {
		position: relative;
		padding: 20rpx 16rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666;
		border: 2rpx solid #e0e0e0;
		transition: all 0.2s;
		text-align: center;
		min-width: 140rpx;
		flex: 1;
	}

	.duration-item.active {
		background: linear-gradient(135deg, #f0f5ff 0%, #e0e8ff 100%);
		border-color: #5a7dff;
		color: #5a7dff;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(90, 125, 255, 0.2);
	}

	.duration-price {
		display: block;
		font-size: 22rpx;
		margin-top: 8rpx;
		color: #ff6b35;
		font-weight: 500;
	}

	.status-selector {
		display: flex;
		gap: 16rpx;
	}

	.status-item {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		border-radius: 12rpx;
		background-color: #f8f9fa;
		font-size: 26rpx;
		color: #666;
		border: 2rpx solid #e0e0e0;
		transition: all 0.2s;
	}

	.status-item.active {
		background: linear-gradient(135deg, #f0f5ff 0%, #e0e8ff 100%);
		border-color: #5a7dff;
		color: #5a7dff;
		font-weight: 500;
	}

	.textarea {
		height: 200rpx;
		padding: 24rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e0e0e0;
		background-color: #f8f9fa;
		font-size: 28rpx;
		color: #333;
		transition: all 0.2s;
		width: 100%;
		box-sizing: border-box;
	}

	.textarea:focus {
		border-color: #5a7dff;
		background-color: #fff;
		box-shadow: 0 0 0 3rpx rgba(90, 125, 255, 0.1);
	}

	.submit-btn {
		width: calc(100% - 48rpx);
		background: linear-gradient(to right, #5a7dff, #7b9aff);
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 28rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(90, 125, 255, 0.4);
		position: fixed;
		bottom: 40rpx;
		left: 24rpx;
		right: 24rpx;
		transition: all 0.2s;
	}

	.submit-btn text {
		margin-right: 12rpx;
	}

	.submit-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(90, 125, 255, 0.4);
	}
</style>